{% load static %}
{% include 'modals/login-modal.html' %}
{% include 'modals/registration-modal.html' %}
{% include 'modals/report-modal.html' %}
{% include 'modals/change-photo-modal.html' %}
{% include 'modals/reset-intro-modal.html' %}
{% include 'modals/reset-modal.html' %}
{% include 'modals/settings-modal.html' %}
{% include 'modals/profile-modal.html' %}
{% include 'modals/start-modal.html' %}
<div class="menu-container">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top">

        <a href="/"><img id="logo" class="center-align inline-block" src="{% static 'logo.svg' %}">
            <h1 id="title" class="center-align inline-block">Minute of Fame</h1></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarSupportedContent">
            {% block b_menu %}
            <ul class="navbar-nav mr-auto">
                {% for item in menu %}
                <li class="nav-item active menu-item">
                    <h3><a class="nav-link" href="{{ item.url }}">{{ item.name }}</a></h3>
                </li>
                {% endfor %}
            </ul>
            {% endblock %}

            <hr class="downdrop-hr">
			{% block usermenu %}
				<ul class="navbar-nav justify-content-end">
					{% if request.user.is_authenticated %}
						<li>
							<h4>
								<a class="btn stream-btn btn_start" data-toggle="modal" data-target="#startModal">
									Start stream
								</a>
							</h4>
						</li>
						<li class="nav-item active menu-item">
							<div class="dropdown">
								<h4 class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
								    aria-haspopup="true" aria-expanded="false" id="username">
									{{ request.user }} </h4>
								<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
									<a class="dropdown-item" href="/profile_{{ request.user }}/">View profile</a>
									<!--<a class="dropdown-item" data-toggle="modal" data-target="#settingsModal" href="#">Settings</a> -->
									<a class="dropdown-item" href="/logout/">Logout</a></div>
							</div>
							{% else %}
						<li class="nav-item">
							<div class="row">

								<h4>
									<a class="nav-link" data-toggle="modal" data-target="#regModal">
										Sign up
									</a>
								</h4>
								<h4>
									<a class="nav-link" data-toggle="modal" data-target="#loginModal">
										Login
									</a>
								</h4>
							</div>
						</li>
					{% endif %}
                    <!--<li>
                        <h4>
                            <a class="nav-link" data-toggle="modal" data-target="#reportModal">
                                Report
                            </a>
                        </h4>

                    </li>-->
				</ul>
			{% endblock %}
		</div>
	</nav>
</div>